<template>
  <!-- 每个模版页必须有一个根节点标签 -->
  <div>
    <!-- 这里就是组件页面显示的内容 -->
    <div class="header">
      <div class="title">
        <div class="title-h" @click="back()">
          <div class="icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="ionicon"
              viewBox="0 0 512 512"
            >
              <path
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="48"
                d="M328 112L184 256l144 144"
              />
            </svg>
          </div>
          <div class="txt-h">转账</div>
        </div>
      </div>
    </div>
    <div class="content_panel">
      <div class="content">
        <div class="header_img">
          <img width="80px" height="80px" :src="user_img" alt="" srcset="" />
        </div>
        <div class="header_text">转账给【个人账户】昵称【{{ payeeName }}】</div>
      </div>
      <div class="mid_content">
        <div class="txt">转账金额</div>
        <div class="input_area">
          <div class="icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="ionicon"
              viewBox="0 0 512 512"
            >
              <path
                d="M448 32h-80L256 253.13 144 32H64l112.37 208H128v48h73.56L216 319v17h-88v48h88v96h80v-96h88v-48h-88v-17l14.89-31H384v-48h-48.29z"
              />
            </svg>
          </div>
          <div class="o_input">
            <input type="number" v-model="moneyValue" />
          </div>
        </div>
        <div class="input_remark">
          <input
            id="remark"
            type="text"
            v-model="order_remark"
            max="20"
            placeholder="添加备注(20字以内)"
          />
        </div>
        <div class="button_area">
          <button @click="doPay" class="el-button el-button--primary el-mybtn">
            确认转账
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//引入外部组件
//import menu from ''
export default {
  name: "paymentpage", //定义组件的名称
  data() {
    //定义组件内部变量
    return {
      payeeId: 1, //收款人id
      payeeName: "**华", //收款人姓名
      paymentId: 2, //付款人id
      paymentName: "张三", //付款人姓名
      moneyValue: "",
      order_remark: "",
      user_img: require("@/assets/img/img-demo.jpeg"),
    };
  },
  mounted() {
    //加载收款人和付款人的必要信息
    let Payee = JSON.parse(this.$store.state.PayeeUser);
    let Payer = JSON.parse(this.$store.state.Authorization);
    //提示：如果从安全角度，这里从后端获取的用户敏感信息应该打码或者**注释
    this.payeeId = Payee.user_id;
    this.payeeName = this.formatename(Payee.user_truename);
    this.paymentId = Payer.user_id;
  },
  methods: {
    async doPay() {
      //提交后端数据,返回的是提交后的结果
      var resData = await this.$http.post("fkpay", {
        order_payee: this.payeeId,
        order_payer: this.paymentId,
        order_payMoney: this.moneyValue,
        order_remark: this.order_remark,
      });
      //支付成功
      if (resData.state == 200) {
        this.$router.push({
          path: "/PaySuccessful",
          name: "PaySuccessful",
          params: {
            pay: this.moneyValue,
          },
        });
      }else{
		this.$router.push('/PayError');
	  }
    },
    formatename(name) {
		let counts = name.length;
		//console.log(counts);
      	return new Array(name.length).join("*") + name.substring(counts-1, counts);
    },
    back() {
      this.$router.push("/");
    },
  },
};
</script>
<style scoped>
/* 独立组件的样式，写这里，支持标准的css语法 */
/* 顶部搜索栏 */
.header {
  background-color: #ffffff;
  color: #000;
  width: 100%;
  border-bottom: solid 1px #ccc;
}

.header .title {
  font-size: 18px;
  margin-left: 20px;
  padding: 20px 0;
}

.title-h {
  display: flex;
  flex-direction: row;
  vertical-align: middle;
  align-items: center;
}

.title-h .icon {
  width: 30px;
  height: 30px;
}

/* 转账内容 */
.content_panel {
  text-align: center;
  font-size: 18px;
  padding: 15px 0;
}

.content_panel .header_text {
  color: #000;
  font-size: 14px;
}

.mid_content {
  text-align: left;
  color: #000;
  font-size: 12px;
  padding: 30px 10px;
}

.input_area {
  padding: 20px 0;
  border-bottom: solid 1px #ccc;
  display: flex;
}

.input_area .icon {
  width: 25px;
  height: 25px;
}

.input_area input {
  height: 30px;
  width: 300px;
  font-size: 35px;
  outline: none;
}

.input_remark input {
  outline: none;
}

.button_area {
  padding: 20px 0;
}

.el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}

.el-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}

.el-mybtn {
  width: 100%;
}
</style>